<template>
  <view class="fill-in-blank">
    <view class="question-card">
      <view class="question-title">
        <text class="title-text">{{ question.category }}</text>
      </view>
      <view class="question-content">
        <view v-for="(part, index) in questionParts" :key="index">
          <view v-if="!part.isBlank" class="text-content">{{ part.text }}</view>
          <input
            v-else
            class="blank-input"
            v-model="userAnswers[part.index]"
            :placeholder="'请填写'"
            :disabled="showResult"
            :class="{
              'correct-answer': showResult && isCorrect(part.index),
              'wrong-answer': showResult && !isCorrect(part.index),
            }"
          />
        </view>

        <!-- 添加答案解释区域 -->
        <view v-if="showResult" class="answer-explanation">
          <view class="correct-answer">
            <view class="explanation-label">正确答案：</view>
          </view>
          <view
            v-for="(answer, index) in question.answers"
            :key="index"
            class="answer-item"
          >
            <view class="blank-number">第{{ index }}空：</view>
            <view class="explanation-text">{{ answer }}</view>
            <view v-if="userAnswers[index - 1] !== answer" class="wrong-answer"
              >（你的答案：{{ userAnswers[index - 1] || "未填写" }}）</view
            >
          </view>
        </view>
      </view>
      <view class="action-bar">
        <button class="submit-btn" @click="checkAnswer" v-if="!showResult">
          提交答案
        </button>
        <button class="next-btn" @click="nextQuestion" v-else>下一题</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    question: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      userAnswers: {},
      questionParts: [],
      showResult: false,
    };
  },
  created() {
    this.parseQuestion();
  },
  methods: {
    parseQuestion() {
      const regex = /{{(.*?)}}/g;
      let content = this.question.content;
      let parts = [];
      let lastIndex = 0;
      let blankIndex = 0;

      let match;
      while ((match = regex.exec(content)) !== null) {
        if (match.index > lastIndex) {
          parts.push({
            text: content.substring(lastIndex, match.index),
            isBlank: false,
          });
        }
        parts.push({
          text: "",
          isBlank: true,
          index: blankIndex,
          answer: match[1],
        });
        blankIndex++;
        lastIndex = regex.lastIndex;
      }

      if (lastIndex < content.length) {
        parts.push({
          text: content.substring(lastIndex),
          isBlank: false,
        });
      }

      this.questionParts = parts;
    },
    isCorrect(index) {
      return this.userAnswers[index] === this.question.answers[index + 1];
    },
    checkAnswer() {
      this.showResult = true;
      let allCorrect = true;
      let answeredCount = 0;

      for (let i = 0; i < Object.keys(this.question.answers).length; i++) {
        if (this.userAnswers[i] === undefined || this.userAnswers[i] === "") {
          continue;
        }
        answeredCount++;
        if (!this.isCorrect(i)) {
          allCorrect = false;
        }
      }

      if (answeredCount === 0) {
        uni.showToast({
          title: "请至少填写一个答案",
          icon: "none",
        });
        this.showResult = false;
        return;
      }

      uni.showToast({
        title: allCorrect ? "回答正确！" : "回答错误",
        icon: allCorrect ? "success" : "error",
      });
    },
    nextQuestion() {
      this.userAnswers = {};
      this.showResult = false;
      this.$emit("next");
    },
  },
  watch: {
    question() {
      this.userAnswers = {};
      this.showResult = false;
      this.parseQuestion();
    },
  },
};
</script>

<style>
.fill-in-blank {
  padding: 30rpx;
}

.question-card {
  background: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
  padding: 30rpx;
}

.question-title {
  border-bottom: 1px solid #eee;
  padding-bottom: 20rpx;
  margin-bottom: 30rpx;
}

.title-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.question-content {
  line-height: 1.8;
  font-size: 30rpx;
  color: #333;
}

.blank-input {
  display: inline-block;
  width: 160rpx;
  height: 60rpx;
  border: none;
  border-bottom: 2px solid #409eff;
  text-align: center;
  margin: 0 10rpx;
  font-size: 28rpx;
  color: #409eff;
  background-color: #f5f7fa;
  border-radius: 8rpx;
  transition: all 0.3s ease;
}

.blank-input:focus {
  border-bottom-color: #2c5cc5;
  background-color: #ecf5ff;
  box-shadow: 0 2rpx 8rpx rgba(64, 158, 255, 0.2);
}

.answer-explanation {
  margin-top: 30rpx;
  padding: 20rpx;
  background-color: #f8f9fa;
  border-radius: 8rpx;
  border-left: 4rpx solid #409eff;
}

.answer-item {
  margin: 10rpx 0;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.blank-number {
  color: #666;
  margin-right: 20rpx;
  min-width: 120rpx;
}

.explanation-label {
  color: #666;
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.explanation-text {
  color: #67c23a;
  font-weight: bold;
  margin-right: 20rpx;
}

.wrong-answer {
  color: #f56c6c;
  margin-left: 10rpx;
}

.blank-input.correct-answer {
  border-color: #67c23a;
  background-color: #f0f9eb;
}

.blank-input.wrong-answer {
  border-color: #f56c6c;
  background-color: #fef0f0;
}

.action-bar {
  margin-top: 40rpx;
  text-align: center;
}

.submit-btn,
.next-btn {
  width: 200rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  color: #fff;
}

.submit-btn {
  background-color: #409eff;
}

.next-btn {
  background-color: #67c23a;
}

@media screen and (max-width: 375px) {
  .blank-input {
    width: 120rpx;
  }

  .question-content {
    font-size: 28rpx;
  }
}

.text-content {
  display: inline-block;
}

.question-content view {
  display: inline-block;
}
</style>
